<template>
  <transition name="bounce" mode="out-in">
    <section class="mui-content pd">
      <mh-header headName="我的二度好友"> </mh-header>
      <div class="gift-list bg-w">
      <ul class="mui-table-view" id="listArea">
        <li class="mui-table-view-cell" id="mode"></li>
      </ul>
      </div>
    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header';
  import {MH_API} from "@/api/api";
  export default {
    name: "my-gift",
    data () {
      return {
        gifts: [],
        getLen: 0,
        getArr: [],
        sendLen: 0,
        sendArr: [],
      }
    },
    components: {
      MhHeader
    },
    methods: {

    },
    created(){
      let self = this;

    },
    mounted(){
      let self = this;
      mui.plusReady(function () {
      // 扩展API加载完毕，现在可以正常调用扩展API 
      plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE, function(addressbook) { 
          addressbook.find(["displayName", "phoneNumbers"], function(contacts) { 
            for(var i = 0, len = contacts.length; i < len; i++) { 
              console.log(JSON.stringify(contacts[i]))
              var li = document.getElementById("mode").cloneNode(true); 
              li.innerHTML = contacts[i].displayName + "<br/>手机：" + (contacts[i].phoneNumbers.length == 0 ? "" : contacts[i].phoneNumbers[0].value); 
              document.getElementById("listArea").appendChild(li); 
            } 
          }, 
            function() { mui.toast("获取电话簿失败 "); }, { multiple: true }); }, 
            function(e) { mui.toast("获取电话簿失败 " + e.message); });
            })
          }
      }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .pic-box {
    background-color: #eeeeee;
    @include mh-avatar-box(3.4rem, 3.4rem)
  }
  .gift-list {
    .item {
      border-bottom: 1px solid #eee;
    }
  }
  .giver-r {
    margin-left: 1rem;
    .u-name {@include sc(1.4rem, #333);}
    .u-age {@include sc(1.2rem, #666);}
  }
  .g-name {@include sc(1.4rem, #f26c60);}
  .g-num {@include sc(1.4rem, #666);}
  .g-time {@include sc(1.4rem, #666);}
  .mui-table-view-cell{ font-size:1.2rem; line-height:180%;}

</style>
